import React, { Component } from 'react'
import './login.scss'
export default class App extends Component {
    state={
        phone:"",
        note:"",
        checkbox:false,
        msg_name:""
    }
    handChange=(e)=>{
        this.setState({
            [e.target.dataset.key]:e.target.value
         })
    }
    //手机号接收
    // handphone=(e)=>{
    //  let phone = e.target.value
    //  this.setState({
    //     phone:phone
    //  })
    // }
    //验证码接收
    // handnode=(e)=>{
    //     let note = e.target.value
    //     this.setState({
    //        note:note
    //     })
    // }
    //登录
    handClick=()=>{
        let phone = this.state.phone
        let note =this.state.note
       if(!phone){
           this.setState({
            msg_name:"请输入手机号"
           });
           return false
       }
       if(!/^1[3|4|5|7|8][0-9]{9}$/.test(phone)){
        this.setState({
            msg_name:"手机号格式错误，请更换后重试"
           });
           return false
       }
       //验证码
       if(!/^\d{6}$/.test(note)){
           this.setState({
               msg_name:"短信验证码错误"
           })
           return false
       }
    }
    // 服务条款状态栏
    handcheckbox=(e)=>{
        console.log(e)
        let checkbox = e.target.checked
        this.setState({
            checkbox:checkbox
        })
    }
    render() {
        return (
            <div className="login">
                <div className="login-logo">
                    <img src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" alt=""/>
                </div>
                <div className="login-phone">
                    <input type="text" placeholder="请输入手机号"
                     value={this.state.phone} 
                     onChange={this.handChange}
                     data-key="phone"
                     />
                </div>
                <div className="login-note">
                   <div className="login-note-left">
                      <input type="number" placeholder="请输入验证码" 
                      value={this.state.note} 
                      onChange={this.handChange}
                      data-key="note"/>
                   </div>
                   <div className="login-note-right">
                      <div className="note-right-text">获取验证码</div>
                   </div>
                </div>
                <div className="msg">
                    {this.state.msg_name}
                </div>
                <div className="login-bottom">
                    <div>遇到问题？</div>
                    <div>使用密码验证登录</div>
                </div>
                
                <div className="login-but" onClick={this.handClick}>
                    <span>登录</span>
                </div>
                <div className="login-service">
                   <div>
                     <input type="checkbox" value={this.state.checkbox} onChange={this.handcheckbox}/>
                   </div>
                   <div>
                     <span>我同意</span>
                     <a href="https://m.you.163.com/u/login?callback=%2Fucenter">《服务条款》</a>
                     <span>和</span>
                     <a href="https://m.you.163.com/u/login?callback=%2Fucenter">《网易隐私政策》</a>
                   </div>
                </div>
            </div>
        )
    }
}
